import React, { Component } from 'react'
import './css/02_option_tab.css';
import Film from './films_comp/Film';
import Cinema from './films_comp/Cinema';
import Center from './films_comp/Center';

export default class App extends Component {
    state = {
        list: [
            {
                id: 1,
                text: "电影"
            },
            {
                id: 2,
                text: "影院"
            },
            {
                id: 3,
                text: "我的"
            }
        ],
        current: 0
    }
    which() {
        switch(this.state.current) {
            case 0: return <Film />
            case 1: return <Cinema />
            case 2: return <Center />
            default:
                return null;
        }
    }
    render() {
        return (
            <div>
                {/* {
                    this.state.current === 0 && <Film />
                }
                {
                    this.state.current === 1 && <Cinema />
                }
                {
                    this.state.current === 2 && <Center />
                } */}
                {
                    // 函数表达式
                    this.which()
                }
                <ul>
                    {
                        this.state.list.map((item, index) =>
                            <li key={item.id} className={this.state.current === index ? 'active' : ''}
                                onClick={() => this.setState({
                                    current: index
                                })}
                            >{item.text}</li>
                        )
                    }
                </ul>
            </div>
        )
    }
}
